<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 字体</title>
    <style>
        /*
        1.0 候选字体 和
        如果读者没有安装 Georgia，但安装了 Times 字体（serif 字体系列中的一种字体），用户代理就可能对 h1 元素使用 Times。
        尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。因此，我们建议在所有 font-family 规则中都提供一个通用字体系列。
        这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选字体。如果您对字体非常熟悉，
        也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：

        您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），
        或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
        单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，
        则需要使用该属性本身未使用的那种引号：
        */
        p.font-family{font-family: Times,Georgia,'Times New Roman',serif}   /* 从左边 到 右边选择*/
        p.normal{font-style: normal}
        p.italic{font-style: italic}
        p.oblique{font-style: oblique}

        /* font-weight: 设置 字体的粗细 样式
            关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，
            100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
            如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。
            与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
            笔者认为 文字的粗体的 比 native 的选择要多
         */
        p.thick{font-weight: bold}
        p.thicker{font-weight: 900}

        /*
         font-size 值可以是绝对或相对值。
        绝对值：

    将文本设置为指定的大小
    不允许用户在所有浏览器中改变文本大小（不利于可用性）
    绝对大小在确定了输出的物理尺寸时很有用
    相对大小：

    相对于周围的元素来设置大小
    允许用户在浏览器改变文本大小
    注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
    在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。
    虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。

    在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
    不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。
    结合使用百分比和 EM
    在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：



     */
        /*h1{font-size: 60px}*/
        /*h2{font-size: 40px}*/
        /*p{font-size: 32px}*/

        h1{font-size: 3.75em}
    </style>
</head>
<body>
    <p class="font-family">font-family</p>
    <p class="normal">normal</p>
    <p class="italic">italic</p>
    <p class="oblique">oblique</p>
    <p class="thick">thick</p>
    <p class="thicker">most tick</p>



</body>
</html>